<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图书管理丨坚球书城</title>
  <script src="js/vue.js"></script>
  <script src="element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/cookie.js"></script>

  <style type="text/css">
    .el-main {
      position: absolute;
      top: 70px;
      bottom: 0px;
      left: 200px;
      right: 10px;
      padding: 0;
    }
  </style>

</head>
<body>
<div id="app" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;">
  <el-container style="height: 100%; border: 1px solid #eee">

    <el-header style="text-align: right; font-size: 12px; ">
      <a href="#" style="float: left;">
        <span><img style="height: 40px;margin-top: 10px" src="http://r3vta9mus.hb-bkt.clouddn.com/nutLogo.png" alt=""></span>
      </a>
      <!--        登录器-->
      <el-dropdown style="top: 50%;right: 40px" v-if="!flag">
        <el-link href="login.html" target="_blank">登录</el-link>
        |
        <el-link type="info" href="register.html">注册</el-link>
      </el-dropdown>
      <!--        登陆后-->
      <el-dropdown style="top: 50%;right: 40px;cursor: pointer" @command="handleCommand" v-if="flag">
        <span>{{this.username}}</span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="order">个人订单</el-dropdown-item>
          <el-dropdown-item command="cancel">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-container>

      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-menu-item index="1-1" @click="toHome"><i class="el-icon-house"></i>首页</el-menu-item>
          <el-menu-item index="1-2" @click="toCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-menu-item>
          <el-submenu index="1" v-if="flag&&username=='admin'">
            <template slot="title"><i class="el-icon-message"></i>后台管理</template>
            <el-menu-item index="1-3" @click="toBookManage">图书管理</el-menu-item>
            <el-menu-item index="1-4" @click="toOrderManage">订单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main style="overflow:hidden">
          <!--    新增图书表单-->
          <el-dialog title="新增图书页面" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :model="form" label-width="50px">
              <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="form.author"></el-input>
              </el-form-item>
              <el-form-item label="销量">
                <el-input v-model="form.sales"></el-input>
              </el-form-item>
              <el-form-item label="库存">
                <el-input v-model="form.stock"></el-input>
              </el-form-item>
              <el-button type="primary" @click="addBook">提交</el-button>
              <el-button @click="dialogVisible=false">取消</el-button>
            </el-form>
          </el-dialog>

          <!--    编辑图书表单-->
          <el-dialog title="编辑图书页面" :visible.sync="dialog4EditVisible" width="40%">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="名称">
                <el-input v-model="form.name" ></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="form.author"></el-input>
              </el-form-item>
              <el-form-item label="销量">
                <el-input v-model="form.sales"></el-input>
              </el-form-item>
              <el-form-item label="库存">
                <el-input v-model="form.stock"></el-input>
              </el-form-item>

              <el-button type="primary" @click="updateBook">提交</el-button>
              <el-button @click="dialog4EditVisible=false">取消</el-button>
            </el-form>
          </el-dialog>

          <!--    按钮-->
          <el-button type="primary" style="margin-left: 20px" @click="dialogVisible=true" plain>新增图书</el-button>

          <el-table :data="tableData" style="margin-left: 10px">
            <el-table-column prop="name" align="center" label="日期">
            </el-table-column>
            <el-table-column prop="price" align="center" label="金额（元）">
            </el-table-column>
            <el-table-column prop="author" align="center" label="作者">
            </el-table-column>
            <el-table-column prop="sales" align="center" label="销量">
            </el-table-column>
            <el-table-column prop="stock" align="center" label="库存">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="图书封面">
              <template slot-scope="scope">
                <el-upload
                        class="upload-demo"
                        action="#"
                        :http-request="upload"
                        multiple
                        :limit="1"
                        :file-list="fileList"
                        :data="scope.row">
                  <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <el-row slot-scope="scope">
                <el-button type="primary" @click="showBook(scope)" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" @click="deleteBook(scope)" icon="el-icon-delete" circle></el-button>
                <el-button type="success" @click="download(scope)"  icon="el-icon-download" circle></el-button>
              </el-row>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-left: 200px">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="this.pageNo"
                    :page-size="this.pageSize"
                    layout="total, prev, pager, next"
                    :total="this.pageTotalCount">
            </el-pagination>
          </div>
        </el-main>
      </el-container>

      <el-footer height="50px" style="text-align: center;">坚球书城.Copyright ©2021</el-footer>

    </el-container>
  </el-container>
</div>
</body>
<script>

  const vm = new Vue({
    el: "#app",
    mounted() {
      this.bookList()
      this.username =  Cookies.get("username")
      this.isLogin()
    },
    data: {
      tableData: [{
        id:'',
        name: 'java从入门到放弃',
        author: '国哥',
        price: '80',
        sales: '1000',
        stock: '199',
        imgPath:'static/img/default.jpg'
      },{
        id:'',
        name: 'java从入门到放弃',
        author: '国哥',
        price: '80',
        sales: '1000',
        stock: '199',
        imgPath: ''
      }],
      form: {
        id:'',
        name:'',
        price:'',
        author:'',
        sales:'',
        stock:'',
        imgPath:'static/img/default.jpg'
      },
      dialogVisible: false,
      dialog4EditVisible: false,
      pageTotalCount:0,
      pageTotal:0,
      pageSize:3,
      pageNo:1,
      username:'',
      flag:false,
      formData: new FormData(),
      fileList:[]
    },
    methods: {
      bookList() {
        var that = this;
        axios({
          method: "get",
          url: "http://localhost:8080/Book/client/clientServlet?action=page&pageNo="+that.pageNo,
          // data: that.pageNo
        }).then(function (response) {
          console.log(response.data.page.items)
          that.tableData = response.data.page.items
          that.pageTotalCount = response.data.page.pageTotalCount
          that.pageTotal = response.data.page.pageTotal
          that.pageNo = response.data.page.pageNo
          that.pageSize = response.data.page.pageSize
        })
      },
      download(scope){
        axios({
          method: "get",
          url: "http://localhost:8080/Book/manager/bookServlet?action=downloadPicture&id="+scope.row.id
        }).then(function (response) {

        })
      },
      //上传
      upload(params) {
        var that = this
        var fileObj = params.file
        var id = params.data.id
        var formData = new FormData();
        console.log(params)
        formData.append("file",fileObj);
        // formData.append("id",id);
        axios({
          method: "post",
          url: "http://localhost:8080/Book/manager/bookServlet?action=updateBookPicture&id="+id,
          data: formData
        })
      },
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo;
        console.log(pageNo)
        //重新调用findPage方法进行分页查询
        this.bookList();
      },
      toHome(){
        window.location.href='index.html'
      },
      toCart(){
        window.location.href='cart.html'
      },
      toOrderManage(){
        window.location.href='orderManage.html'
      },
      toOrder(){
        window.location.href='order.html'
      },
      toBookManage(){
        window.location.href='bookManage.html'
      },
      isLogin(){
        if (this.username!==''&&this.username.length>0){
          this.flag = true
        }
      },
      handleCommand(command){
        if (command === 'order'){
          this.toOrder()
        }else if(command === 'cancel'){
          Cookies.set("username",'')
          window.location.href='index.html'
        }
      },
      addBook(){
        var that = this;
        axios({
          method: "post",
          url: "http://localhost:8080/Book/manager/bookServlet?action=add&username="+that.username,
          data:{
            name:that.form.name,
            price:that.form.price,
            author:that.form.author,
            sales:that.form.sales,
            stock:that.form.stock,
            imgPath:'static/img/default.jpg'
          }
        }).then(function (response) {
          that.dialogVisible=false
          that.bookList()
          console.log(response)
          if (response.data.code===20000){
            that.$message({
              message: '添加图书成功！',
              type: 'success'
            });
          } else {
            that.$message({
              message: '添加图书失败！',
              type: 'error'
            });
          }
        })
      },
      deleteBook(scope){
        console.log(scope.row.id)
        var that = this;
        axios({
          method: "get",
          url: "http://localhost:8080/Book/manager/bookServlet?action=delete&id="+scope.row.id,
        }).then(function (response) {
          that.bookList()
          if (response.data.code===20000){
            that.$message({
              message: '删除图书成功！',
              type: 'success'
            });
          } else {
            that.$message({
              message: '删除图书失败！',
              type: 'error'
            });
          }
        })
      },
      showBook(scope){
          console.log(scope.row.id)
          this.dialog4EditVisible=true
          var that = this;
          axios({
              method: "get",
              url: "http://localhost:8080/Book/manager/bookServlet?action=getBook&id="+scope.row.id,
          }).then(function (response) {
              console.log(response.data.data.book)
              that.form = response.data.data.book
          })
      },
        updateBook(){
          var that = this;
          axios({
            method: "post",
            url: "http://localhost:8080/Book/manager/bookServlet?action=update&username="+that.username,
            data:{
              id:that.form.id,
              name:that.form.name,
              price:that.form.price,
              author:that.form.author,
              sales:that.form.sales,
              stock:that.form.stock,
              imgPath:'static/img/default.jpg'
            }
          }).then(function (response) {
            that.dialog4EditVisible=false
            that.bookList()
            console.log(response)
            if (response.data.code===20000){
              that.$message({
                message: response.data.message,
                type: 'success'
              });
            } else {
              that.$message({
                message:response.data.message,
                type: 'error'
              });
            }
          })
        }
    }
  })
</script>
</html>